<template>
  <el-dialog @close="reset" :title="adminData.id>0?'编辑':'新增'" :visible.sync="info.isShow">
    <el-form
      ref="adminForm"
      label-width="80px"
      :model="adminData"
      :rules="rules"
    >
      <el-form-item label="账号角色" prop="roleid">
        <el-select v-model="adminData.roleid" placeholder="账号角色">
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :value="item.id"
            :label="item.rolename"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账号" prop="username">
        <el-input placeholder="账号" :disabled="adminData.id>0" v-model="adminData.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="adminData.password"
          type="password"
          placeholder="密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="账号状态" prop="status">
        <el-radio-group v-model="adminData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="dialog-footer" slot="footer">
      <el-button @click="reset">取消</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 导入vuex辅助函数
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState("role", ["roleList"]),
  },
  props: ["info"],
  data() {
    return {
      // 表单数据对象
      adminData: {
        roleid: "",
        username: "",
        password: "",
        status: "",
      },
      // 表单校验规则
      rules: {
        roleid: { required: true, message: "请选择角色", trigger: "blur" },
        username: { required: true, message: "请输入账号", trigger: "blur" },
        password: { required: true, message: "请输入密码", trigger: "blur" },
        status: { required: true, message: "请选择状态", trigger: "blur" },
      },
    };
  },
  methods: {
    ...mapActions("role", ["getRoleListAction"]),
    // 更新表单数据
    setFormData(obj) {
      this.adminData = { ...obj };
      // 清空password
      this.adminData.password = "";
    },
    //   重置数据
    reset() {
      this.adminData = {
        id: "",
        roleid: "",
        username: "",
        password: "",
        status: "",
      };
      //   关闭对话框组件
      this.info.isShow = false;
    },
    submit() {
      this.$refs.adminForm.validate((valid) => {
        if (valid) {
          //   提交数据
          const url = this.adminData.id > 0 ? "/useredit" : "/useradd";
          this.$axios.post(url, this.adminData).then((res) => {
            if (res.code === 200) {
              this.$message.success(res.msg);
              // 更新管理员数据: 通知父组件更新数据
              this.$emit("adminUpdate");
              // 重置数据
              this.reset();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
  },
  created() {
    //   请求角色列表
    this.getRoleListAction();
  },
};
</script>

<style>
</style>